<template>
	<div class="screensharemark">
		<div id="handsign" class="handsigncontent">
			<canvas id="handWhiteboard" width="300" height="300"></canvas>
			<div class="code">AS894DJKlILJK00UUIHUIU98</div>
		</div>
	</div>
</template>

<script>
import imchat from '../../tool/imchat';
export default {
	name: 'RemoteHandSign',
	mounted() {
		// eslint-disable-next-line no-undef
		this.whiteboardCanvas = new fabric.Canvas('handWhiteboard');
		this.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
		this.whiteboardCanvas.selection = false; //画板不显示选中
		var self = this;
		imchat.$on('handWriting', function(code) {
			self.showCache(code);
		});
	},
	methods: {
		showCache(data) {
			this.whiteboardCanvas.loadFromJSON(JSON.parse(data));
			this.whiteboardCanvas.renderAll();
			this.whiteboardCanvas.skipTargetFind = true; //画板元素不能被选中
			this.whiteboardCanvas.selection = false; //画板不显示选中
		}
	}
};
</script>

<style scoped>
.screensharemark {
	width: 100%;
	/*background-color: yellow;*/
	margin-top: -80px;
}

.handsigncontent {
	width: 300px;
	height: 330px;
	margin: 0 auto;
	background-color: white;
	margin-top: 100px;
	position: relative;
	border: 1px solid #ececec;
}

.code {
	position: absolute;
	/*left: 75px;*/
	text-align: left;
	height: 30px;
}
</style>
